<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" type='card'>
      <el-tab-pane :label="item.tab" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <div class="filter-container filter-container-left">
      <el-form :inline="true" label-width='90px' class="flex_box_between">
        <el-form-item label='红包名称:'>
          <el-input v-model="queryParam.name" placeholder="红包名称" clearable class="filter-item" />
        </el-form-item>
        <el-form-item label='红包对象:'>
          <el-select v-model="queryParam.type" placeholder="请选择红包对象" class="filter-item">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='用户动作:'>
          <el-select v-model="queryParam.action" placeholder="请选择用户动作" class="filter-item">
            <el-option
              v-for="item in queryParam.type==2?optionsCompany:optionsUser"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='创建时间'>
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item form-search-input1"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="flex_box_center search_btns">
        <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
        <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
        <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="handleCreate">添加红包规则</el-button>
      </div>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='70' align='center'/> -->
      <el-table-column prop="name" label="红包名称" align='center'/>
      <el-table-column label="红包对象" align='center'  width='80'>
        <template slot-scope="item">
          <p>{{item.row.type==1?'个人':'企业'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="红包总金额"  align='center' width='100'>
        <template slot-scope="item">
          <p>{{item.row.single_money*item.row.count}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="single_money" label="单个红包金额" align='center' width='100'/>
      <el-table-column prop="count" label="红包总数" align='center' width='80'/>
      <el-table-column prop="received" label="已领取红包" align='center' width='90'/>
      <el-table-column prop="receive_number" label="待领取红包" align='center' width='90'/>
      <el-table-column prop="surplus" label="剩余红包" align='center' width='80'/>
      <el-table-column label="用户动作"  align='center' width='90'>
        <template slot-scope="item">
          <p>{{getAction(item.row)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="有效期" align='center' width='130'>
        <template slot-scope="item">
          <p>{{getDay(item.row)}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align='center' width='130'/>
      <el-table-column label="启用状态" width='140px' align='center'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.enable"
            :active-value="1"
            :inactive-value="0"
            :active-text="item.row.enable==1?'已启用':'已关闭'"
            @change="disOrEnableUser(item.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width='220' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" @click="handleDetails(item.row)" :underline="false"><i class="iconfont icon-chakan"></i>查看</el-link>
          <el-link type="primary" class="table_btn" @click="handleUpdate(item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="danger" class="table_btn" @click="handleDelete(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <el-dialog :visible.sync="formVisible" width="654px" @close="handleCancel">
      <div slot="title" class="dialog-title">红包设置规则</div>
      <el-card class="el-card-border">
        <el-form :ref="formName" :label-position="labelPosition" :model="formFieldsData" :rules="rules" label-width='120px'>
          <el-form-item label="红包名称：" prop="name">
            <el-input v-model="formFieldsData.name" clearable placeholder='请输入红包名称'/>
          </el-form-item>
          <el-form-item label="红包对象：" prop="type">
            <el-select v-model="formFieldsData.type" placeholder="请选择对象" style="width:100%">
              <el-option
                v-for="(item,key) in optionsType"
                :key="key"
                :label="item.label"
                :value="item.value"
                :disabled='item.disabled'
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户动作：" prop="action">
            <el-radio-group v-model="formFieldsData.action">
              <el-radio :label="1">注册</el-radio>
              <el-radio :label="2">{{formFieldsData.type==1?'发布简历':'发布职位'}}</el-radio>
              <el-radio :label="3">{{formFieldsData.type==1?'浏览岗位':'浏览简历'}}</el-radio>
              <el-radio :label="4" v-if="formFieldsData.type==2">注册公司</el-radio>
              <el-radio :label="5" v-if="formFieldsData.type==2">累计浏览</el-radio>
              <el-radio :label="6" v-if="formFieldsData.type==2">连续浏览</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="浏览数量：" prop="browser_number" v-if="formFieldsData.action==3">
            <el-input v-model="formFieldsData.browser_number" type='number' clearable placeholder="达到此数量才发放红包"/>
          </el-form-item>
          <el-form-item label="红包总数：" prop="count">
            <div class="flex_box">
              <el-input v-model="formFieldsData.count" type='number' clearable placeholder="达到此数量才发放红包"/>
              <span class="suffix">个</span>
            </div>
          </el-form-item>
          <el-form-item label="单个红包金额：" prop="single_money">
            <div class="flex_box">
              <el-input v-model="formFieldsData.single_money" type='number' clearable placeholder="请输入红包金额"/>
              <span class="suffix">元</span>
            </div>
          </el-form-item>
          <el-form-item label="红包总金额：" prop="single_money">
            <p class="tips">（红包总金额 = 红包总数*单个红包金额，自动生成）</p>
          </el-form-item>
          <el-form-item label="是否需要用户手动领取：" prop="is_receive" label-width='180px'>
            <el-radio-group v-model="formFieldsData.is_receive">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="有效期：" prop="validity_type">
            <el-radio-group v-model="formFieldsData.validity_type">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">固定日期</el-radio>
              <el-radio :label="2" v-if="formFieldsData.action!=1">注册当日N天内有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="起始时间：" prop="time" v-if="formFieldsData.validity_type==1">
            <el-date-picker
              v-model="time1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              class="filter-item form-search-input1"
              @change='timeChange1'
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="注册当日N天内有效：" prop="day" v-if="formFieldsData.action!=1&&formFieldsData.validity_type==2">
            <el-input v-model="formFieldsData.day" autocomplete="off" clearable placeholder='请输入天数'/>
          </el-form-item>
          <el-form-item label="是否启用：" prop="enable">
            <el-radio-group v-model="formFieldsData.enable">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="handleSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/promotion/admin/redPackets',
      tabs:[
        {id:'',tab:'全部',name:'first'},
        {id:1,tab:'已启用',name:'second'},
        {id:0,tab:'已关闭',name:'third'}
      ],
      activeName: 'second',// tabs默认第几个展开
      queryParam: {
        name: '',
        type:'',
        action:'',
        start_time:'',
        end_time:'',
        page:1,
        page_size:10,
        enable:1
      },
      defaultQueryParam:['page','page_size','enable'],
      optionsType:[
        {value:1,label:'个人'},
        {value:2,label:'企业',disabled:true}
      ],
      optionsUser:[
        {value:'1',label:'注册'},
        {value:'2',label:'发布简历'},
        {value:'3',label:'浏览岗位'}
      ],
      optionsCompany:[
        {value:'1',label:'注册'},
        {value:'2',label:'发布职位'},
        {value:'3',label:'浏览简历'},
        {value:'4',label:'注册公司'},
        {value:'5',label:'累计浏览'},
        {value:'6',label:'连续浏览'}
      ],
      formName:'redRule',
      formFieldsData:{
        name:'',
        send_type:1,
        send_class:'1',
        type:1,
        action:1,
        validity_type:0,
        start_time:'',
        end_time:'',
        day:'',
        browser_number:'',
        count:'',
        single_money:'',
        send_number:'',
        is_receive:1,
        enable:1,
        receive_number:''
      },
      time:'',
      time1:'',
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入红包名称', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入红包总数', trigger: 'blur'  }
        ],
        single_money: [
          { required: true, message: '单个红包金额不能为空', trigger: 'blur' }
        ]
      },
      id:''
    }
  },
  mounted() {

  },
  methods: {
    // tab切换
    handleClick(tab, event) {
      this.queryParam.enable = this.tabs[tab.index].id
      this.queryParam.page = 1
      this.paginate.current = 1
      this.resetFormFields()
      this.getList()
    },
    beforeCreate() {
      this.formFieldsData.send_type = 1
      this.formFieldsData.send_class = 1
    },
    // 添加红包规则
    beforeSubmit() {
      if (this.formFieldsData.action==3) {
        this.rules['browser_number'] =[
          { required: true, message: '浏览次数不能为空' }
        ]
      }
      if (this.formFieldsData.validity_type==1&&this.formFieldsData.start_time=='') {
        this.rules['start_time'] =[
          { required: true, message: '有效期不能为空' }
        ]
      }
      if (this.formFieldsData.validity_type==2&&this.formFieldsData.day=='') {
        this.rules['day'] =[
          { required: true, message: '注册当日N天内有效不能为空' }
        ]
      }
    },
    // 修改启用状态
    disOrEnableUser(item) {
      this.$http.put(this.url + '/' + item.id, {enable:item.enable}).then((response) => {
        if (response.code==10000) {
          this.getList()
        } else {
          item.enable = !item.enable
        }
      })
    },
    // 获取用户动作
    getAction(item) {
      if (!item.type) return
      if (item.type==1) {
        let idx = this.optionsUser.findIndex(res=>{
          return res.value == item.action
          console.log(res.value,item.action)
        })
        return this.optionsUser[idx].label
      } else {
        let idx = this.optionsCompany.findIndex(res=>{
          return res.value == item.action
        })
        return this.optionsCompany[idx].label
      }
    },
    // 获取有效期
    getDay(item) {
      return item.validity_type==0?'无':item.validity_type==1?item.start_time+'-'+item.end_time:item.day
    },
    // 监听时间选择
    timeChange1(t) {
      this.formFieldsData.start_time = t[0]
      this.formFieldsData.end_time = t[1]
    },
    // 查看详情
    handleDetails(row) {
      this.$router.push({path:'/activity/redDetails/',query:{id:row.id}})
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/styles/element-variables.scss';
  .tips{
    color:$--color-primary;
  }
</style>